<template>
  <div>
    <div>
      <el-button type="primary" @click="tapAddBtn">新增套餐</el-button>
    </div>
    <el-table :data="records">
      <el-table-column type="index" label="序号" width="60px" />
      <el-table-column prop="goodsDesc" label="套餐描述" />
      <el-table-column prop="goodsLabel" label="套餐标签" />
      <el-table-column prop="goodsOrder" label="排序" />
      <el-table-column prop="goodsSize" label="套餐容量" />
      <el-table-column label="是否展示">
        <template #default="scope">
          <el-switch
            v-model="scope.row.isShow"
            :active-value="1"
            :inactive-value="0"
            @change="handleChange($event, scope.row)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="labelColor" label="标签颜色" />
      <el-table-column prop="period" label="有效期" />
      <el-table-column prop="periodUnit" label="有效期单位" />
      <el-table-column prop="price" label="价格" />

      <el-table-column fixed="right" label="操作" width="200px">
        <template #default="scope">
          <el-button type="success" @click="tapEditBtn(scope.row)"
            >编辑</el-button
          >
          <el-popconfirm
            title="确定删除该套餐？"
            confirm-button-text="确定"
            cancel-button-text="取消"
            @confirm="delDetail(scope.row)"
          >
            <template #reference>
              <el-button type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div class="flex justify-end mt-2">
      <el-pagination
        background
        layout="prev, pager, next"
        v-model:current-page="filter.pageNum"
        :default-page-size="filter.pageSize"
        :total="total"
        @prev-click="getList"
        @next-click="getList"
        @current-change="getList"
      />
    </div>
    <el-dialog
      v-model="editDialog"
      :title="(isEdit ? '编辑' : '新增') + '套餐'"
      @close="handleClose"
    >
      <el-form class="form-box">
        <el-form-item label="套餐描述">
          <el-input v-model="editItemForm.goodsDesc"></el-input>
        </el-form-item>
        <el-form-item label="套餐标签">
          <el-input v-model="editItemForm.goodsLabel"></el-input>
        </el-form-item>
        <el-form-item label="套餐容量(G)">
          <el-input-number v-model="editItemForm.goodsSize"></el-input-number>
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number v-model="editItemForm.goodsOrder"></el-input-number>
        </el-form-item>
        <el-form-item label="是否展示">
          <el-switch
            v-model="editItemForm.isShow"
            :active-value="1"
            :inactive-value="0"
          ></el-switch>
        </el-form-item>
        <el-form-item label="标签颜色">
          <ColorPicker
            v-model:pureColor="editItemForm.labelColor"
            format="hex"
          ></ColorPicker>
        </el-form-item>
        <el-form-item label="有效期">
          <el-input-number v-model="editItemForm.period"></el-input-number>
        </el-form-item>
        <el-form-item label="有效期单位">
          <el-select v-model="editItemForm.periodUnit">
            <el-option label="日" :value="1"></el-option>
            <el-option label="月" :value="2"></el-option>
            <el-option label="年" :value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="价格（元）">
          <el-input-number v-model="editItemForm.price"></el-input-number>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveUpdate">保存</el-button>
          <el-button @click="editDialog = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import {
  getGoodsList,
  addGoods,
  updateGoods,
  delGoods,
  updateGoodsVisible,
} from "@/apis/goods";
import { ElMessage } from "element-plus";

const records = ref<GoodsItem[]>([]);
const total = ref(1);
const filter = reactive<PageFilter>({
  pageNum: 1,
  pageSize: 10,
});
const getList = async () => {
  const res = await getGoodsList(filter);
  records.value = res.list;
  total.value = res.total;
};
// const search = () => {
//   filter.pageNum = 1;
//   getList();
// };
onMounted(() => {
  getList();
});
const editDialog = ref(false);
const editItemForm = ref<GoodsPatchData>({
  goodsDesc: "",
  goodsLabel: "",
  goodsOrder: 0,
  goodsSize: 0,
  isShow: 0,
  labelColor: "",
  period: 0,
  periodUnit: 0,
  price: 0,
});
const editItemId = ref<number>();
const isEdit = ref(true);
const tapAddBtn = () => {
  editDialog.value = true;
  isEdit.value = false;
  editItemForm.value = {
    goodsDesc: "",
    goodsLabel: "",
    goodsOrder: 0,
    goodsSize: 0,
    isShow: 0,
    labelColor: "",
    period: 0,
    periodUnit: 0,
    price: 0,
  };
};
const tapEditBtn = (row: GoodsItem) => {
  editDialog.value = true;
  isEdit.value = true;
  editItemId.value = row.goodsId;
  editItemForm.value = row;
};
const handleClose = () => {};
const saveUpdate = async () => {
  if (isEdit.value && editItemId.value) {
    // 编辑
    await updateGoods(editItemId.value, editItemForm.value);
    ElMessage.success("修改成功");
    editDialog.value = false;

    getList();
  } else if (!isEdit.value) {
    // 新增
    await addGoods(editItemForm.value);
    ElMessage.success("添加成功");
    editDialog.value = false;

    getList();
  }
};
const delDetail = async (row: GoodsItem) => {
  await delGoods(row.goodsId);
  ElMessage.success("删除成功");
  getList();
};
const handleChange = async (val: number, row: GoodsItem) => {
  await updateGoodsVisible(row.goodsId, val).then(() => getList());
  ElMessage.success("状态切换成功");
  getList();
};
</script>

<style scoped></style>
